<template>
  <el-form :model="ruleForm" ref="ruleForm">
    <!--退保台数-->
    <el-card class="box-card" shadow="never">

      <div slot="header" class="header-card">
        <span class="header-card-title">退保台数</span>
      </div>

      <el-row :gutter="24">
        <el-col>
          <el-table :data="ruleForm.tableData" border :header-cell-class-name="headerClass">

            <el-table-column label="车系" prop="seriesName" min-width="130" show-overflow-tooltip align="center"/>

            <el-table-column label="车型" prop="modelName" min-width="200" show-overflow-tooltip align="center"/>

            <el-table-column label="车辆类型" prop="customerName" min-width="120" show-overflow-tooltip align="center"/>

            <el-table-column label="保证金/台" prop="ascription" min-width="120" show-overflow-tooltip align="center"/>

            <el-table-column label="租金/台" prop="ascription" min-width="120" show-overflow-tooltip align="center"/>

            <el-table-column label="退保台数" prop="ascription" min-width="120" show-overflow-tooltip align="center">
              <template #default="{row,$index}">
                <el-form-item class="formTable" :prop="'tableData.'+$index+'.ascription'"
                              :rules="{required: isEdit,  trigger: 'blur'}">
                  <el-input v-if="isEdit" v-model="row.ascription"
                            placeholder="请输入退保台数" v-thousand
                            @change="changeTable(row, $index, 'insurancePrice')" size="mini"/>
                  <span v-else>{{ format_thousand(row.insurancePrice) }}</span>
                </el-form-item>

              </template>
            </el-table-column>

            <el-table-column label="备注" show-overflow-tooltip min-width="160" prop="ascription" align="center">
              <template #default="{row,$index}">
                <el-form-item class="formTable" :prop="'tableData.'+$index+'.ascription'"
                              :rules="{required: isEdit,  trigger: 'blur'}">
                  <el-input v-if="isEdit" v-model="row.ascription"
                            placeholder="请输入备注" size="mini"/>
                  <span v-else>{{ row.insurancePrice }}</span>
                </el-form-item>

              </template>
            </el-table-column>

          </el-table>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-col>
          <div class="foot">
            <span>总计：</span>
            <span>退保车辆台数：8台</span>
            <span>总金额：5000元</span>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </el-form>
</template>

<script>
export default {
  name: 'cancellationNumber',
  components: {},
//退保台数
  props: {
    value: {
      type: Object,
      default: () => {
        return {};
      },
    },
    state: {
      type: String,
      default: "",
    },
  },

  computed: {
    ruleForm: {
      get() {
        let that = this
        const proxy = new Proxy(that.value, {
          get(target, key, value) {
            return Reflect.get(target, key)
          },
          set(target, key, value) {
            that.$emit("input", {...target, [key]: value});
            return true;
          },
        })
        return proxy
      }
    },
    isEdit() {
      let bool;
      switch (this.state) {
        case "write":
          bool = true;
          break;
        case "disabled":
          bool = false;
          break;
        case "readonly":
          bool = false;
          break;
      }
      return bool
    }
  },
  data() {
    return {
      headerList: ['ascription']
    };
  },
  created() {
  },
  mounted() {
  },
  methods: {
    headerClass({row, column, rowIndex, columnIndex}) {
      for (let i = 0; i < row.length; i++) {
        if (this.headerList.includes(row[i].property) && i == columnIndex && this.isEdit) {
          return "header-class";
        }
      }
    },

    changeTable(row, key, field) {
      let msg = /^(?:[1-9]\d*|0)(?:\.\d+)?$/;
      let _value
      if (row[field]) {
        if (msg.test(Number(row[field]))) {
          if (Number(row[field]) >= 0) {
            _value = row[field].toString().match(/^\d+(?:\.\d{0,2})?/)[0];
            row[field] = _value;
          } else {
            row[field] = "";
          }
        } else {
          row[field] = "";
        }
      }
    },

    handleEffect() {
      return new Promise((resolve, reject) => {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            resolve();
          } else {
            reject();
          }
        });
      });
    },


  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/cwgd/formScss.scss";

::v-deep .header-class {
  .cell::before {
    content: "*";
    color: red;
    padding-right: 2px;
    font-size: 14px;
  }
}
.foot {
  padding-top:  10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  font-size: 18px;
  font-weight: 800;
}
</style>


